<template>
  <section class="common-container">
    <header class="common-header">
      <img
        class="common-logo"
        src="../assets/images/about_03.jpg" alt="">
      <div class="common-nav">
        <ul class="small-nav">
          <li
            v-for="nav_item in navs"
            :key="nav_item.label"
            :class="{'is-active': nav_item.url === current_url}"
          >
            <a target="_blank" :href="nav_item.url" v-if="nav_item.label==='财务系统'">{{nav_item.label}}</a>
            <nuxt-link :to="nav_item.url" v-else>{{nav_item.label}}</nuxt-link>
          </li>
        </ul>
      </div>
      <div class="common-slogan">
        <p class="common_slogan-text">服务热线：<span class="strong">188-0562-8708</span></p>
      </div>
    </header>
    <el-dialog
      class="dialog_get-more"
      :title="title"
      :visible.sync="visible"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item
          prop="name"
          v-if="form.type === '1'"
          :rules="[{required: true, message: '请输入企业名称'}]"
          label="企业名称"
        >
          <el-input v-model="form.name" placeholder="请输入企业名称"></el-input>
        </el-form-item>
        <el-form-item
          prop="username"
          :rules="[{required: true, message: '请输入联系人姓名'}]"
          label="联系人"
        >
          <el-input v-model="form.username" placeholder="请输入联系人姓名"></el-input>
        </el-form-item>
        <el-form-item
          prop="phone"
          :rules="[{required: true, message: '请输入联系电话'}]"
          label="联系电话"
        >
          <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          @click="visible = false">取 消</el-button>
        <el-button
          :loading="loading"
          type="primary"
          @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <nuxt/>
  </section>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-05-05
   * @Project: eabax
   */
  import '../assets/less/layouts/index.less'
  import Bus from '../components/event-bus'

  export default {
    name: 'common',
    data() {
      return {
        navs: [{
          label: '网站首页',
          url: '/'
        }, {
          label: '注册公司',
          url: '/register-company'
        }, {
          label: '代理记账',
          url: '/agent'
        }, {
          label: '税筹服务',
          url: '/tax-raise'
        }, {
          label: '商标知产',
          url: '/trademark'
        }, {
          label: '行业资讯',
          url: '/article/list'
        }, {
          label: '财务系统',
          url: 'http://198.yundaizhang.com/View/OEMLoginNew.html?qyh=670195'
        }, {
          label: '关于我们',
          url: '/about'
        }],
        visible: false,
        loading: false,
        form: {
          type: ''
        }
      }
    },
    computed: {
      current_url() {
        return this.$route.path
      },
      title() {
        let type = this.form.type,
          title = '',
          desc = ''
        switch (type) {
          case '1':
            title = '企业名称查询表'
            break
          case '2':
            title = '获取注册公司报价'
            break
          case '3':
            title = '获取代理记账及方案'
            break
          case '4':
            title = '享受无忧代帐'
            break
          case '5':
            title = '商标注册获取报价'
            break
        }
        return title
      }
    },
    watch: {
      visible(visible) {
        if (!visible) {
          this.$refs.form.resetFields()
        }
      }
    },
    mounted() {
      this.init()
    },
    beforeDestroy() {
      this.destroy()
    },
    methods: {
      init() {
        Bus.$on('get-more', (form) => {
          this.form = Object.assign({}, this.form, form)
          this.visible = true
        })
      },
      destroy() {
        Bus.$off('get-more')
      },
      submit() {
        let form = this.form
        this.$refs.form.validate(valid => {
          if (!valid) return
          this.$axios
            .$post('/api/v1/apply', form)
            .then(res => {
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.visible = false
            })
            .catch(res => {
              this.$message({
                message: res && res.msg || '提交失败',
                type: 'error'
              })
            })
        })
      }
    }
  }
</script>
<style lang="less">
  .dialog_get-more {
    .el-dialog__body {
      padding: 24px 48px;
    }
  }
</style>
